<template>
  <view class="login">
    <div class="logo" @click="Ybackhome">
      <!-- <image src="../../static/Y-shutDown.png" mode=""></image> -->
    </div>
    <div class="wel">欢迎</div>
    <div class="title">登录</div>
    <van-field
      v-model="loginForm.account"
      autofocus
      label=""
      clearable
      right-icon="user-o"
      placeholder="请输入账号"
      style="margin-bottom: 10px"
    />
    <van-field
      v-model="loginForm.password"
      :type="icon ? 'text' : 'password'"
      label=""
      clearable
      @click-right-icon="() => (icon = !icon)"
      :right-icon="icon ? 'closed-eye' : 'eye-o'"
      placeholder="请输入密码"
    />
    <van-button class="btn" type="primary" block @click="onLogin"
      >登录</van-button
    >
  </view>
</template>

<script>
import { login } from "@/api/user.js";
import { Toast } from "vant";
export default {
  data() {
    return {
      icon: false,
      loginForm: {
        account: "",
        password: "",
        grantType: "password", // 验证方式 密码
      },
    };
  },
  mounted() {},
  onShow() {
    this.$nextTick(() => {
      this.setStyle();
    });
  },
  methods: {
    onLogin() {
      const toast = Toast.loading({
        duration: 0,
        message: "登录中...",
        forbidClick: true,
      });
      login(this.loginForm)
        .then((res) => {
          uni.setStorageSync("token", res.data.accessToken);
          uni.setStorageSync("userInfo", res.data);
          uni.navigateTo({
            url: `/pages/index/index`,
          });
          toast.clear();
        })
        .catch(() => {
          toast.clear();
        });
    },

    setStyle() {
      // document.getElementsByClassName('van-field__label')[0].style.display = 'none'
      document.getElementsByClassName("van-field")[0].style.padding = 0;
      document.getElementsByClassName("van-field")[0].style.height =
        "2.96875rem";
      document.getElementsByClassName("van-field")[0].style.border =
        "1px solid #DCDCDC";
      document.getElementsByClassName("van-field")[0].style.borderRadius =
        "0.21875rem";
      document.getElementsByClassName("van-field__body")[0].style.height =
        "2.96875rem";
      document.getElementsByClassName("van-field__body")[0].style.padding =
        "0px 0.625rem";
      document.getElementsByClassName("van-field")[1].style.padding = 0;
      document.getElementsByClassName("van-field")[1].style.height =
        "2.96875rem";
      document.getElementsByClassName("van-field")[1].style.border =
        "1px solid #DCDCDC";
      document.getElementsByClassName("van-field")[1].style.borderRadius =
        "0.21875rem";
      document.getElementsByClassName("van-field__body")[1].style.height =
        "2.96875rem";
      document.getElementsByClassName("van-field__body")[1].style.padding =
        "0px 0.625rem";
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .van-field__control::-webkit-input-placeholder {
  color: #b9b9b9;
  font-size: 28rpx;
}

body {
  background-color: #f9f9f9;
}

.login {
  position: fixed;
  height: 90vh;
  width: 100%;
  background-color: #f9f9f9;
  padding: 0 70rpx;
  overflow: hidden;
  box-sizing: border-box;

  .prompt {
    color: red;
    font-size: 20rpx !important;
    display: inline-block;
  }

  .logo {
    width: 30rpx;
    height: 30rpx;
    margin-top: 60rpx;
    margin-left: -28rpx;
    border-radius: 13rpx;
    margin-bottom: 90rpx;

    & > image {
      width: 100%;
      height: 100%;
    }
  }

  .wel {
    font-size: 50rpx;
    font-weight: 700;
    letter-spacing: 1px;
  }

  .btn {
    margin-top: 55rpx;
    font-size: 33rpx;
    box-shadow: 0px 13px 9px -9px #1989fa;
  }

  .title {
    font-size: 33rpx;
    margin: 45rpx 0 80rpx 0;
  }

  .tip {
    margin-top: 66rpx;
    text-align: center;
    font-size: 27rpx;
    letter-spacing: 2px;

    & > span {
      color: #ea1c1c;
    }
  }

  .Y-loginImg {
    display: flex;
    justify-content: center;
    margin-top: 60rpx;

    div {
      width: 65rpx;
      height: 65rpx;
      border-radius: 33rpx;
      overflow: hidden;
      margin: 0 25rpx;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .Y-loginText {
    text-align: center;
    margin-top: 15rpx;
    color: #b9b9b9;
    font-size: 24rpx;
  }

  .Y-loginBottom {
    font-size: 20rpx;
    line-height: 30rpx;
    color: #b9b9b9;
    text-align: center;
    margin-top: 130rpx;

    .Y-loginBottom-2 {
      transform: scale(0.5);
      font-size: 40rpx;
      line-height: 40rpx;

      a {
        color: #3423da;
      }
    }

    .Y-loginBottom-3 {
      display: flex;
      justify-content: center;
      color: #838383;
      transform: scale(0.5);
      text-align: left;
      font-size: 20rpx;

      .Y-loginBottom-3-Img {
        width: 54rpx;
        height: 54rpx;
        margin-right: 10rpx;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .Y-loginBox {
    height: 120rpx;
  }

  .Y-prompt {
    color: #ea1c1c;
    font-size: 20rpx;
    height: 25rpx;
    margin-top: -20rpx;
    margin-left: 10rpx;
  }
}
</style>
